import React, { useState, useEffect }  from 'react'
import { connect } from 'dva'
import { Col, Form, Table, Select, Input, DatePicker, message } from 'antd'
import { formLayout } from '@/utils/utils'
import RenderButtom from '@/components/RenderButton'
import { fetchSaleList, fetchPosList, fetchStoresList } from '@/services/dataCenter/financeData'
import SearchBox from '@/components/SearchBox'
const {RangePicker} = DatePicker
import moment from 'moment'

const dateFormat = 'YYYY-MM-DD'

const SaleForm = props => {
  const { form, platForms, payTypes } = props
  const { getFieldDecorator } = form
  const [posList, setPosList] = useState([])
  const [storesList, setStoresList] = useState([])
  const [saleList, setSaleList] = useState([])
  const [total, setTotalPage] = useState(null)
  const [startTime, setStartTime] = useState('')
  const [endTime, setEndTime] = useState('')

  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
    payTypes: [],
  })

  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  useEffect(() => {
    _fetchStoresList()
    _fetchPosList()
    init()
  }, [])
  const init = async param => {
    const res = await fetchSaleList(param)
    if (res.code == 0) {
      setSaleList(res.data)
      setTotalPage(res.total)
    } else {
      message.warning(res.msg)
    }
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      init({
        ...param,
        ...values,
        pageNo: 1,
        startTime: startTime,
        endTime: endTime
      })
    })
  }


  // 按钮处理
  const handleBtn = type => {

  }
  const _fetchStoresList = async () => {
    let param = {
      // supplierId: form.getFieldValue('supplierId'),
      supplierId: 1072,
      pageSize: 999
    }
    const res = await fetchStoresList(param)
    setStoresList(res.data)
  }
  const _fetchPosList = async () => {
    const res = await fetchPosList()
    setPosList(res.data)
  }
  const storeTypes = [{
    value: 1,
    label: '机构结算'
  },{
    value: 2,
    label: '平台结算'
  }]

  const pagination = {
    total: parseInt(total),
    onChange (page) {
      init({
        ...param,
        pageNo: page,
      })
    }
  }
  const saleCol = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      fixed: 'left',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '门店名称',
      dataIndex: 'storeName',
      key: 'storeName',
      width: 150,
      fixed: 'left',
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      width: 220,
    },
    {
      title: '支付订单号',
      dataIndex: 'payOrderNo',
      key: 'payOrderNo',
      width: 220,
    },
    {
      title: '渠道订单号',
      dataIndex: 'thirdOrderNo',
      key: 'thirdOrderNo',
      width: 150,
    },
    {
      title: '机构订单号',
      dataIndex: 'outTransactionNo',
      key: 'outTransactionNo',
      width: 220,
    },
    {
      title: '商户号',
      dataIndex: 'merchantNo',
      key: 'merchantNo',
      width: 100,
    },
    {
      title: '平台来源',
      dataIndex: 'platFormName',
      key: 'platFormName',
      width: 100,
    },
    {
      title: '支付场景',
      dataIndex: 'payScenceName',
      key: 'payScenceName',
      width: 100,
    },
    {
      title: '支付标记',
      dataIndex: 'tradeTypeName',
      key: 'tradeTypeName',
      width: 100,
    },
    {
      title: '支付方式',
      dataIndex: 'payTypeName',
      key: 'payTypeName',
      width: 100,
    },
    {
      title: '支付状态',
      dataIndex: 'payStatusName',
      key: 'payStatusName',
      width: 100,
    },
    {
      title: 'posSn',
      dataIndex: 'posSn',
      key: 'posSn',
      width: 100,
    },
    {
      title: 'pos名称',
      dataIndex: 'posName',
      key: 'posName',
      width: 100,
    },
    {
      title: '支付金额',
      dataIndex: 'payAmount',
      key: 'payAmount',
      width: 100,
    },
    {
      title: '优惠(红包)',
      dataIndex: 'payCoupon',
      key: 'payCoupon',
      width: 100,
      render: (v, r, i) => {
        return (<span>￥ {v}</span>  )
      }
    },
    {
      title: '付款时间',
      dataIndex: 'payTime',
      key: 'payTime',
      width: 200,
    },
  ]
  const tradeTypes = [
    {
        label: "扫码支付",
        value: 'NATIVE'
    },
    {
        label: "条码支付",
        value: 'BARCODE'
    },
    {
        label: "JSAPI",
        value: 'JSAPI'
    },
  ]

  //操作系统
  const osTypes = [
    {
        label: "WIN PC",
        value: 'Windows'
    },
    {
        label: "IOS",
        value: 'IOS'
    },
    {
        label: "安卓",
        value: 'Android'
    },
    {
        label: "Window Phone",
        value: 'WP'
    },
    {
        label: "其他",
        value: 'OTHER'
    },
  ]
  //支付场景
  const payScenes = [
    {
        label: "普通收银",
        value: 'CASHIER'
    },
    {
        label: "单柜收银",
        value: 'COUNTER_CASHIER'
    },
    {
        label: "员工收银",
        value: 'EMPLOYER_CASHIER'
    },
    {
        label: "线上商城",
        value: 'MALL_CASHIER'
    },
    {
        label: "台卡收款",
        value: 'TAB_CARD_CASHIER'
    },
    {
        label: "会员卡充值",
        value: 'MEMBER_RECHARGE'
    },
    {
        label: "代付金充值",
        value: 'PAID_GOLD_RECHARGE'
    },
    {
        label: "短信充值",
        value: 'SMS_RECHARGE'
    },
    {
        label: "直播订单",
        value: 'LIVE_ORDER'
    },
    {
        label: "软文订单",
        value: 'ADVERTORIAL_ORDER'
    },
    {
        label: "扫码点单",
        value: 'SCANQRCODE_CASHIER'
    },
    {
        label: "KTV预定",
        value: 'KTV_YD'
    },
    {
        label: "秒杀订单",
        value: 'SECKILL_ORDER'
    },
    {
        label: "拼团订单",
        value: 'GROUP_PURCHASE_ORDER'
    },
  ]

  // 选择时间
  const selectData = (date, dateString) => {
    setStartTime(dateString[0])
    setEndTime(dateString[1])
  }

  const getFields = () => {
    return (<>
    <Col span={8}>
      <Form.Item label="选择门店" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('storeId', {})
          (<Select>
            {storesList && storesList.map((m, i) => <Select.Option key={i} value={m.storeId}>{m.storeName}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="结算类型" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('storeType', {})
          (<Select>
            {storeTypes.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="pos机" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('posSn', {})
          (<Select>
            {posList.map((m, i) => <Select.Option key={i} value={m.sn}>{m.posName}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('orderNo', {})
          (<Input />)}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="支付订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('payOrderNo', {})
          (<Input />)}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="机构订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('outTransactionNo', {})
          (<Input />)}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="渠道订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('thirdOrderNo', {})
          (<Input />)}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="支付类型" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('payTypes', {})
          (<Select mode="multiple">
            {payTypes.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="支付标记" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('tradeType', {})
          (<Select>
            {tradeTypes.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="支付场景" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('payScene', {})
          (<Select>
            {payScenes.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="操作系统" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('osType', {})
          (<Select>
            {osTypes.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="平台来源" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator('platForm', {})
          (<Select>
            {platForms.map((m, i) => <Select.Option key={i} value={m.value}>{m.label}</Select.Option>)}
          </Select>
        )}
      </Form.Item>
    </Col>
    <Col span={8}>
      <Form.Item label="选择日期" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {getFieldDecorator(`vistTime`, {
          defaultValue: [moment(), moment()]
        })
          (<RangePicker onChange={selectData} format={dateFormat} />)}
      </Form.Item>
    </Col>
  </>)}

  return (<Form layout={formLayout}>
    <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    <Table scroll={{ x: 2500 }} rowKey={record => record.id} pagination={pagination} size="small" columns={saleCol} dataSource={saleList}/>
  </Form>)
}


export default connect(({global}) => ({
  platForms: global.platForms,
  payTypes: global.payTypes
}))(Form.create({})(SaleForm))
